<template>
  <div id="mount">
    <div class="bg-content">
      <div class="login-content">
        <div class="login-title">海洋监测数据信息管理系统</div>
        <div class="input-tem">
          <div>
            <img class="icon" src="@/assets/img/denglu-yonghu.svg" />
            <input
              type="text"
              v-model="accountNumber"
              autocomplete="off"
              placeholder="请输入账户名"
            />
          </div>
        </div>
        <div class="input-tem">
          <div>
            <img class="icon" src="@/assets/img/denglu-mima.svg" />
            <input
              type="password"
              v-model="password"
              autocomplete="off"
              placeholder="请输入密码"
            />
          </div>
        </div>
        <div class="input-tem" @click="login">
          <a class="login-button">登录</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      accountNumber: "",
      password: "",
    };
  },
  mounted() {},
  computed: {},
  methods: {
    login() {
      if (!this.accountNumber || !this.password) return;
      let obj = { accountNumber: this.accountNumber, password: this.password };
      this.$axios({
        method: "get",
        url: "login",
        params: obj,
      })
        .then((res) => {
          if (res.data.state == -2) {
            this.$message({
              showClose: true,
              message: "用户不存在 请重新输入",
              type: "error",
            });
            this.password = "";
            this.accountNumber = "";
          } else if (res.data.state == -1) {
            this.$message({
              showClose: true,
              message: "密码错误 请重新输入",
              type: "error",
            });
            this.password = "";
          } else {
            this.$message({
              showClose: true,
              message: "登录成功",
              type: "success",
            });
            //将登录状态储存在vuex中
            this.$store.commit("addUserInfo", res.data);
            switch (res.data.state) {
              case 0:
                this.$router.push("/national");
                break;
              case 1:
                this.$router.push("/provincial");
                break;
              case 2:
                this.$router.push("/patrol-staff");
                break;
              case 3:
                this.$router.push("/assayer");
                break;
              default:
                break;
            }
          }
        })
        .catch((err) => err);
    },
  },
};
</script>
<style scoped>
.bg-content {
  position: fixed;
  background: url(https://image5.cnpp.cn/upload/images/20180515/11483130745_1200x800.jpg)
    no-repeat;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
}

.login-content {
  position: relative;
  top: 20%;
  margin: 0 auto;
  width: 410px;
  padding: 50px;
  box-shadow: 0 0 20px #ecf4f8;
  background-color: #fff;
  opacity: 0.9;
}

.login-content .login-title {
  font-size: 30px;
  color: #5e6166;
  text-align: center;
  margin-bottom: 10px;
}

.login-content .input-tem {
  width: 100%;
  margin-top: 30px;
  position: relative;
}

.login-content .input-tem > div {
  position: relative;
}

.login-content .input-tem > div .icon {
  height: 100%;
  width: 48px;
  margin-left: 8px;
  position: absolute;
  z-index: 100;
}

.login-content .input-tem > div input {
  outline: none;
  box-sizing: border-box;
  width: 100%;
  vertical-align: middle;
  font-size: 20px;
  height: 58px;
  line-height: 58px;
  border: 1px solid #64dcdc;
  border-radius: 10px;
  background-color: #fff;
  padding-left: 58px;
}

.login-content .input-tem .login-button {
  height: 60px;
  line-height: 60px;
  background-color: #56a7c0;
  text-align: center;
  width: 100%;
  display: inline-block;
  border-radius: 10px;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}
</style>
